<template>
  <div>
    <el-card shadow='never'>
      <div slot='header'>
        <span style='font-size: 18px; font-weight: 700; line-height: 32px'>基本信息</span>
      </div>
      <!-- 编辑表单 -->
      <div
        style='overflow-y:auto;'
        v-if="editFlag == 'edit'"
      >
        <el-form
          ref='form'
          :model='form'
          :rules="rules"
          label-width='120px'
        >
          <div style='display: flex; flex-wrap: wrap;'>
            <el-form-item
              label='项目编号'
              prop='xmbm'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.xmbm'
                style='width: 130%;'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='项目名称'
              prop='name'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.name'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='项目简称'
              prop='xmjc'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.xmjc'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='药物名称'
              prop='drugName'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.drugName'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='英文名称'
              prop='enName'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.enName'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='剂型'
              prop='dose'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.dose'
                style='width: 130%'
              ></el-input>
            </el-form-item>
          </div>

          <el-form-item
            label='阶段'
            prop='phase'
          >
            <el-radio-group v-model='form.phase'>
              <el-radio label='1期'></el-radio>
              <el-radio label='2期'></el-radio>
              <el-radio label='3期'></el-radio>
              <el-radio label='4期'></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='临床试验批件号'>
            <el-input
              v-model='form.instructionsId'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='批件号日期'>
            <el-input
              v-model='form.instructionsTime'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='适应症'>
            <el-input
              v-model='form.indication'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='意向科室'>
            <el-input
              v-model='form.room'
              style='width: 50%'
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div
        style='overflow-y:auto;'
        v-if="editFlag == 'new'"
      >
        <el-form
          ref='form'
          :model='form'
          :rules="rules"
          label-width='120px'
        >
          <div style='display: flex; flex-wrap: wrap;'>
            <el-form-item
              label='项目编号'
              prop='xmbm'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.xmbm'
                style='width: 130%;'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='项目名称'
              prop='name'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.name'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='项目简称'
              prop='xmjc'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.xmjc'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='药物名称'
              prop='drugName'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.drugName'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='英文名称'
              prop='enName'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.enName'
                style='width: 130%'
              ></el-input>
            </el-form-item>
            <el-form-item
              label='剂型'
              prop='dose'
              style='margin-right: 80px'
            >
              <el-input
                v-model='form.dose'
                style='width: 130%'
              ></el-input>
            </el-form-item>
          </div>

          <el-form-item
            label='阶段'
            prop='phase'
          >
            <el-radio-group v-model='form.phase'>
              <el-radio label='1期'></el-radio>
              <el-radio label='2期'></el-radio>
              <el-radio label='3期'></el-radio>
              <el-radio label='4期'></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='临床试验批件号'>
            <el-input
              v-model='form.instructionsId'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='批件号日期'>
            <el-input
              v-model='form.instructionsTime'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='适应症'>
            <el-input
              v-model='form.indication'
              style='width: 50%'
            ></el-input>
          </el-form-item>
          <el-form-item label='意向科室'>
            <el-input
              v-model='form.room'
              style='width: 50%'
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getTabListDetailsAPI } from '@/api/backStage.js';

export default {
    name: 'essentialInfo',
    props: ['xmid'],
    data() {
        return {
            form: JSON.parse(localStorage.getItem('essential')) || {
                xmbm: '', // 项目编号
                name: '', // 项目名称
                xmjc: '', // 项目简称
                drugName: '', // 药物名称
                enName: '', // 英文名称
                dose: '', // 剂型
                phase: '', // 阶段
                instructionsId: '', // 临床试验批件号
                instructionsTime: '', // 批件号日期
                indication: '', //适应症
                room: '' // 意向科室
            },
            rules: {
                xmbm: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
                xmjc: [{ required: true, message: '项目简称不能为空', trigger: 'blur' }],
                drugName: [{ required: true, message: '药物名称不能为空', trigger: 'blur' }],
                enName: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
                dose: [{ required: true, message: '剂型名称不能为空', trigger: 'blur' }],
                phase: [{ required: true, message: '请选择阶段', trigger: 'change' }]
            }
        };
    },
    computed: {
        ...mapState({
            essentialInfo: (state) => state.applyFor,
            editFlag: (state) => {
                return state.applyFor.editFlag;
            }
        })
    },
    mounted() {
        if (this.editFlag == 'edit') {
            this.getTabListDetailsAPI();
        } else if (this.editFlag == 'new') {
            this.form = {
                xmbm: '', // 项目编号
                name: '', // 项目名称
                xmjc: '', // 项目简称
                drugName: '', // 药物名称
                enName: '', // 英文名称
                dose: '', // 剂型
                phase: '', // 阶段
                instructionsId: '', // 临床试验批件号
                instructionsTime: '', // 批件号日期
                indication: '', //适应症
                room: '' // 意向科室
            };
        }
    },
    methods: {
        async getTabListDetailsAPI() {
            const res = await getTabListDetailsAPI({ token: this.$store.state.user.token, xmid: this.essentialInfo.applyxmid });
            if (res.code == 'succ') {
                this.form = res.result[0].JBXX;
            } else {
                this.$message.error(res.message);
            }
        }
        // onSubmit() {
        //     this.$refs.form.validate(valid => {
        //         if (valid) {
        //             // 执行操作
        //             localStorage.setItem('essential', JSON.stringify(this.form))
        //             this.$message({duration: 1500, message: '保存成功!', type: 'success'})
        //         }
        //     })
        // }
    }
};
</script>

<style>
.el-tabs--border-card > .el-tabs__content {
    padding: 0;
}
.el-input.is-disabled .el-input__inner,
.el-radio__input.is-disabled + span.el-radio__label,
.el-textarea.is-disabled .el-textarea__inner {
    color: #333;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #000;
}
</style>
